import React, { useRef } from "react";
import _ from "lodash";
import { Form, Input, Select, Space, Button, DatePicker } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { getDateTime3 } from "@/utils/getDate";
import { apiServicePage, apiServicePutaway } from "@/request/services";
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import TheImage from "@/components/TheImage";
import Detail from "../component/Detail";
import "../style/style.less";

const { RangePicker } = DatePicker;

const SearchHeader = ({ getValue }) => {
  const formRef = useRef();
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.serviceStartDate = getDateTime3(values.time[0]);
      values.serviceEndDate = getDateTime3(values.time[1]);
    }
    delete values.time;
    _.forIn(values, (v, k) => {
      if (!v) {
        delete values[k];
      }
    });
    getValue(values);
  };
  const reset = () => {
    formRef.current.setFieldsValue({
      storeServiceName: "",
      serviceId: "",
      serviceStatus: null,
      time: [],
    });
    getValue({});
  };
  return (
    <Form layout={"inline"} ref={formRef} onFinish={onFinish}>
      <Form.Item name={"storeServiceName"}>
        <Input
          style={{ width: 140 }}
          suffix={<SearchOutlined />}
          placeholder={"服务名称"}
        />
      </Form.Item>
      <Form.Item name={"serviceId"}>
        <Input
          style={{ width: 140 }}
          suffix={<SearchOutlined />}
          placeholder={"服务ID"}
        />
      </Form.Item>
      <Form.Item name={"serviceStatus"} label="状态">
        <Select
          style={{ width: 140 }}
          options={[
            { value: "Y", label: "开启" },
            { value: "N", label: "关闭" },
            { value: "G", label: "管理员关闭" },
          ]}
          placeholder={"状态"}
        />
      </Form.Item>
      <Form.Item name={"time"} label="上架时间">
        <RangePicker />
      </Form.Item>
      <Form.Item>
        <Space size="small" style={{ marginLeft: 10 }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button onClick={reset}>重置</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

class List extends React.Component {
  state = {
    columns: [
      {
        title: "服务ID",
        dataIndex: "serviceId",
        key: "serviceId",
      },
      {
        title: "服务名称",
        dataIndex: "serviceName",
        key: "serviceName",
      },
      {
        title: "服务logo",
        dataIndex: "serviceShowFile",
        key: "serviceShowFile",
        render: (text, render) => {
          return (
            <TheImage src={render.serviceShowFile} width={80} height={80} />
          );
        },
      },
      {
        title: "所属类型",
        dataIndex: "serviceClassifyName",
        key: "serviceClassifyName",
      },
      {
        title: "服务价格",
        dataIndex: "serviceRealPrice",
        key: "serviceRealPrice",
        render: (text, render) => {
          return <React.$Price price={render.serviceRealPrice || 0} />;
        },
      },
      {
        title: "预约时间",
        render: (text, render) => {
          return (
            <div>
              {render.serviceStartTime} 至 {render.serviceEndTime}
            </div>
          );
        },
      },
      {
        title: "上架时间",
        dataIndex: "createTime",
        key: "createTime",
      },
      {
        title: "状态",
        render: (text, render) => {
          let label = "";
          switch (render.serviceStatus) {
            case "Y":
              label = "开启";
              break;
            case "N":
              label = "关闭";
              break;
            case "G":
              label = "管理员关闭";
              break;
            default:
              label = "返回值错误";
          }
          return label;
        },
      },
      {
        title: "操作",
        fixed: "right",
        render: (text, render) => {
          return (
            <div>
              <TheButton
                haspermi={["service:details"]}
                onClick={() => this.openDetail(render.serviceId)}
              >
                查看详情
              </TheButton>
              {(render.serviceStatus === "N" ||
                render.serviceStatus === "G") && (
                <TheButton
                  haspermi={["service:state"]}
                  onClick={() =>
                    this.putawayClick(render.serviceId, "Y", "开启")
                  }
                >
                  开启
                </TheButton>
              )}
              {render.serviceStatus === "Y" && (
                <TheButton
                  haspermi={["service:state"]}
                  onClick={() =>
                    this.putawayClick(render.serviceId, "G", "关闭")
                  }
                >
                  关闭
                </TheButton>
              )}
            </div>
          );
        },
      },
    ],
    data: [],
    pageData: {
      pageNo: 1,
      pageSize: 10,
    },
    total: 0,
    detailVisible: false,
    searchValue: {},
    serviceId: "",
  };
  async componentDidMount() {
    await this.getData();
  }
  getData = async () => {
    const {
      searchValue,
      pageData: { pageNo, pageSize },
    } = this.state;
    let res = await apiServicePage({
      ...searchValue,
      pageNo,
      pageSize,
      approvalStatus: "T",
    });
    if (res.data && res.code === 0) {
      this.setState({
        data: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize,
        },
        total: res.totalCount,
      });
    }
  };

  pageChange = (pageNo, pageSize) => {
    this.setState(
      {
        pageData: {
          pageNo,
          pageSize,
        },
      },
      () => {
        this.getData();
      }
    );
  };
  getValue = (value) => {
    this.setState(
      {
        searchValue: value,
        pageData: {
          pageNo: 1,
          pageSize: 10,
        },
      },
      () => {
        this.getData();
      }
    );
  };
  cancelConfirm = () => {
    React.$confirm({
      title: "您确认删除本条商品吗？",
      onOk: async () => {},
    });
  };
  openDetail = (serviceId) => {
    this.setState({ detailVisible: true, serviceId });
  };
  detailClose = () => {
    this.setState({ detailVisible: false, serviceId: "" });
  };
  putawayClick = (serviceId, serviceStatus, text) => {
    React.$confirm({
      title: `您确认${text}此服务吗？`,
      onOk: async () => {
        let res = await apiServicePutaway({ serviceId, serviceStatus });
        if (res.code === 0) {
          React.$message({
            type: "info",
            content: `服务${text}成功`,
          });
          this.getData();
        }
      },
    });
  };
  render() {
    const {
      columns,
      data,
      pageData,
      total,
      detailVisible,
      detailData,
      serviceId,
    } = this.state;
    return (
      <div className="p-layout-box commodity-examine">
        <SearchHeader openAdd={this.openAdd} getValue={this.getValue} />
        <div className="p-layout-content-pagination">
          <TheTable
            scroll={{ x: "max-content", y: "63vh" }}
            columns={columns}
            dataSource={data}
          />
          <ThePagination
            pageNo={pageData.pageNo}
            pageSize={pageData.pageSize}
            total={total}
            pageChange={this.pageChange}
          />
          <TheDialog
            title="服务详情"
            visible={detailVisible}
            handleCancel={this.detailClose}
            footer={null}
          >
            <Detail serviceId={serviceId} />
          </TheDialog>
        </div>
      </div>
    );
  }
}

export default List;
